<template>
	<div class="tabs">
		<div class="tabs1">
			<router-link to="/">
				<p>主题游</p>
				<br />
				<p class="gxdc">个性独创</p>
			</router-link>
		</div>
		<div class="tabs2">
			<ul>
				<li v-for="item in tabList1" :key="item.id" :style="'background-image:url('+item.imgURL+')'">
					<router-link to="/">
						{{item.name}}
					</router-link>
				</li>
			</ul>
			
		</div>
		<div class="tabs3">
			<ul>
				<li v-for="item in tabList2" :key="item.id" :style="'background-image:url('+item.imgURL+')'">
					<router-link to="/">
						{{item.name}}
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<img src="../../../assets/img/tupian1.png" />
<img src="../../../assets/img/tupian1.png" />
<script>
	export default{
		name:'Tabs',
		data(){
			return{
				tabList1:[
					{id:1,imgURL:require('@/assets/img/tupian2.png'),name:'亲子游'},
					{id:2,imgURL:require('@/assets/img/tupian3.png'),name:'摄影游'},
					{id:3,imgURL:require('@/assets/img/tupian4.png'),name:'户外游'},
					{id:4,imgURL:require('@/assets/img/tupian5.png'),name:'活动赛事'},
					{id:5,imgURL:require('@/assets/img/tupian6.png'),name:'瑜伽行'},
					{id:6,imgURL:require('@/assets/img/tupian11.png'),name:'野奢邦'},
				],
				tabList2:[
					{id:7,imgURL:require('@/assets/img/tupian7.png'),name:'定制游'},
					{id:8,imgURL:require('@/assets/img/tupian8.png'),name:'签证'},
					{id:9,imgURL:require('@/assets/img/tupian9.png'),name:'邮轮'},
					{id:10,imgURL:require('@/assets/img/tupian10.png'),name:'美宿度假'},
				],
			}
		}
	}
</script>

<style scoped>
a{
	text-decoration: none;
	color: #000000;
}
.tabs{
	margin-top: 0.2rem;
	font-size: 0.35rem;
	text-align: center;
	font-weight: bold;
}
.gxdc{
	width: 50%;
	height: 0.5rem;
	display: flex;
	margin: auto;
	align-items: center;
	justify-content: center;
	background-color: #ffd800;
	font-size: 0.3rem;
	padding: 0 0.2rem;
	border-radius: 0.2rem;
	font-weight: bold;
}
.tabs .tabs1{
	width: 25%;
	height: 2.4rem;
	float: left;
	background: url(../../../assets/img/tupian1.png);
	background-size: 100% 100%;
}
.tabs .tabs1 p{
	text-align: center;
	line-height: 0.1rem;
}
.tabs .tabs1 p:nth-child(1){
	padding-top: 0.7rem;
}
.tabs .tabs2{
	width: 75%;
	height: 2.5rem;
	float: left;
	text-align: center;
	line-height: 1.2rem;
	font-weight: bold;
	font-size: 20px;
}
.tabs .tabs2 ul li{
	width: 33%;
	height: 1.3rem;
	float: left;
	font-size: 20px;
	background-size: 100% 100%;
}
.tabs .tabs3{
	width: 100%;
	height: 1.5rem;
	float: left;
	line-height: 1rem;
	margin-bottom: 0.5rem;
}
.tabs .tabs3 ul li{
	width: 25%;
	height: 1.2rem;
	float: left;
	background-size: 100% 100%;
	text-align: center;
}
</style>
